/*
 * @Author: liuying 247220246@qq.com
 * @Date: 2025-01-20 14:58:30
 * @LastEditors: liuying 247220246@qq.com
 * @LastEditTime: 2025-01-21 10:43:57
 * @FilePath: \my-book-react\src\bases\grid\grid-item.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React from 'react';
import './styles/grid-item.scss';
export interface GridItemProps {
  // 跨度
  span?: number;
  // 点击事件
  onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
  children: React.ReactNode;
}
const classPrefix = 'ygm-grid-item';
const GridItem: React.FC<GridItemProps> = (props) => {
  const style = React.useMemo(() => {
    return { '--item-span': props.span };
  }, [props.span]);
  return (
    <div className={classPrefix} style={style as React.CSSProperties} onClick={props.onClick}>
      {props.children}
    </div>
  );
};
GridItem.displayName = 'Grid Item';
export default GridItem;
